<template>
  <div class="dashboard-container">
    <!-- 筛选条件 -->
    <div class="filter">
        <el-date-picker 
            v-model="params.start_date"
            type="date"
            placeholder="开始日期"
            style="width: 130px;"
            value-format="yyyy-MM-dd"
            size="mini"
        ></el-date-picker> - 
        <el-date-picker 
            v-model="params.end_date"
            type="date"
            placeholder="结束日期"
            style="width: 130px;margin-right: 5px;"
            size="mini"
            value-format="yyyy-MM-dd"
        ></el-date-picker>
        <el-time-picker
            v-model="params.start_time"
            placeholder="开始时间"
            style="width: 130px;"
            size="mini"
            value-format="HH:mm:ss"
        >
        </el-time-picker>-
        <el-time-picker
            v-model="params.end_time"
            placeholder="结束时间"
            style="width: 130px;margin-right: 5px;"
            size="mini"
            value-format="HH:mm:ss"
        >
        </el-time-picker>
        <el-input v-model="params.amount" placeholder="总金额" size="mini" style="width: 100px;margin-right: 5px;" clearable></el-input>
        <el-input v-model="params.z_value" placeholder="本位值" size="mini" style="width: 100px;margin-right: 5px;" clearable></el-input>
        <el-input v-model="params.number2_min" placeholder="最小份数" size="mini" style="width: 100px;margin-right: 5px;" clearable></el-input>-
        <el-input v-model="params.number2_max" placeholder="最大份数" size="mini" style="width: 100px;margin-right: 5px;" clearable></el-input>
        <el-input v-model="params.start" placeholder="场次开始" size="mini" style="width: 100px;margin-right: 5px;" clearable></el-input>-
        <el-input v-model="params.end" placeholder="场次结束" size="mini" style="width: 100px;margin-right: 5px;" clearable></el-input>
        <el-input v-model="params.number" placeholder="近x场数据" size="mini" style="width: 100px;margin-right: 5px;" clearable></el-input>
        <!-- <el-select v-model="params.number" size="mini" placeholder="请选择场次" clearable>
            <el-option label="近1场" :value="1"></el-option>
            <el-option label="近10场" :value="10"></el-option>
            <el-option label="近20场" :value="20"></el-option>
            <el-option label="近50场" :value="50"></el-option>
        </el-select> -->
        <el-select v-model="params.is_task" clearable size="mini" style="margin-right: 5px">
            <el-option label="任务生成" :value="1"></el-option>
            <el-option label="人工录入" :value="2"></el-option>
            <el-option label="所有" value=""></el-option>
        </el-select>
        <el-button type="primary" size="mini" @click="getData">查询</el-button>
        <el-button type="primary" size="mini" @click="handleResetSearch">重置</el-button>
    </div>

    <!-- 多本位数据统计结果 -->
    <div class="bw_result">
        <div class="left">
            <div class="title">多本位数统计结果</div>
            <div class="bw_item">
                <div class="title">总胜场</div>
                <div class="number" style="color: #FF5F57;">{{total.win_enter_number}}</div>
            </div>
             <div class="bw_item">
                <div class="title">总负场</div>
                <div class="number" style="color: #27C840;">{{total.los_enter_number}}</div>
            </div>
            <div class="bw_item">
                <div class="title">总胜数(倍)</div>
                <div class="number" style="color: #FF5F57;">{{total.sum_win}}</div>
            </div>
             <div class="bw_item">
                <div class="title">总负数(倍)</div>
                <div class="number" style="color: #27C840;">{{total.sum_los}}</div>
            </div>
            <div class="bw_item">
                <div class="title">总胜数</div>
                <div class="number" style="color: #FF5F57;">{{total.sum_win_num}}</div>
            </div>
             <div class="bw_item">
                <div class="title">总负数</div>
                <div class="number" style="color: #27C840;">{{total.sum_los_num}}</div>
            </div>
            <div style="margin-bottom: 5px;font-size: 14px;">本位平均数：{{ total.avg }}</div>
            <div style="margin-bottom: 5px;font-size: 14px;">金额平均数：{{ total.avgInput }}</div>
            <div style="margin-bottom: 5px;font-size: 14px;">胜场百分比：{{ bfb1 }}</div>
            <div style="margin-bottom: 5px;font-size: 14px;">胜数(倍)百分比：{{ bfb2 }}</div>
            <div style="margin-bottom: 5px;font-size: 14px;">胜数百分比：{{ bfb3 }}</div>
        </div>
        <div class="right">
            <el-row :gutter="10">
                <el-col :span="5" v-for="item,index in total.list" style="margin-bottom: 20px;" :key="index">
                    <div class="r_item" >
                        <div class="top">
                            <el-row>
                                <el-col :span="8">
                                    <div class="t_con">
                                        <div class="sub_title">本位</div>
                                        <div class="sub_number">{{ item.value }}</div>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="t_con">
                                        <div class="sub_title">概率</div>
                                        <div class="sub_number">{{item.odds}}%</div>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="t_con">
                                        <div class="sub_title">场次</div>
                                        <div class="sub_number">{{item.bw_count}}场</div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="bottom">
                            <el-row>
                                <el-col :span="12">
                                    <div class="b_con">
                                        <div class="sub_title">胜场 <span class="number">{{item.win}}场</span></div>
                                        <div class="sub_title">胜(倍) <span class="number">{{ item.bw_win }}</span></div>
                                        <div class="sub_title">胜 <span class="number">{{ item.bw_win_num }}</span></div>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="b_con">
                                        <div class="sub_title">负场 <span class="number">{{item.los}}场</span></div>
                                        <div class="sub_title">负(倍) <span class="number">{{ item.bw_los }}</span></div>
                                        <div class="sub_title">负 <span class="number">{{ item.bw_los_num }}</span></div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>

    <div>各位平均数：平均数/平均金额</div>
    <div class="ava">
        <el-row :gutter="20">
            <el-col :span="2" v-for="item,index in total.avaList" :key="index">
                <div style="margin-bottom: 10px">
                    <div class="top">第{{item.index}}位</div>
                    <div class="bottom">{{ item.value }}/{{ item.value_input }}</div>
                    <div class="">
                        <el-button type="text" size="mini" @click="handleDetail(item.detail)">详情</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div>总平均数：{{total.normal_avg}};总平均金额：{{total.normal_avg_input}}</div>
    </div>

    <div>闲家数值1-15出现次数</div>
    <div class="ava">
        <el-row :gutter="20">
            <el-col :span="2" v-for="item, index in total.xjList" :key="index">
                <div>
                    <div class="top">数值{{ item.value }}</div>
                    <div class="bottom">{{item.number}}次</div>
                </div>
            </el-col>
        </el-row>
    </div>

    <el-dialog
        title="详情"
        :visible.sync="dialogVisible"
        width="400px"
    >
        <div class="item" style="margin-bottom: 10px;" v-for="item,index in detail_list" :key="index">数值{{item.value}}： {{item.number}}次</div>
        <el-button size="mini" @click="dialogVisible=false">关闭</el-button>
    </el-dialog>


  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { enterTotal } from '@/api/enter'
import moment from 'moment'
const params = {
    start_date: '',
    end_date: '',
    start_time: '',
    end_time: '',
    amount: "",
    z_value: "",
    number: '', //场次
    number2_min: '', //份数
    number2_max: '', //份数
    start: '',
    end: '',
    type: 3,
    is_task: 2
}

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data(){
    return {
        params: {},
        total: {
            list: [],
            avaList: [],
            xjList: []
        },
        fullscreenLoading: false,
        dialogVisible: false,
        detail_list: [],
        bfb1:"",
        bfb2:"",
        bfb3:"",
    }
  },
  mounted(){
    this.handleResetSearch();
  },
  methods: {
    handleDetail(detail){
        this.detail_list = detail;
        this.dialogVisible = true;
    },
    handleResetSearch(){
        this.params = JSON.parse(JSON.stringify(params))
        this.getData();
    },
    async getData(){
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        
        if(this.params.number>0){
            this.params.number = Number(this.params.number)
        }
        let data = await enterTotal(this.params)
        this.bfb1 = ((data.win_enter_number - data.los_enter_number)/data.los_enter_number*100).toFixed(2) + '%'
        this.bfb2 = ((data.sum_win - data.sum_los)/data.sum_los*100).toFixed(2) + '%'
        this.bfb3 = ((data.sum_win_num - data.sum_los_num)/data.sum_los_num*100).toFixed(2) + '%'
        this.total = data;
        loading.close();
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col-5{
    width: 20%;
}
.dashboard {

  &-container {
    margin: 30px;
    .ava{
        border: 1px solid #d9d9d9; 
        margin: 20px 0;
        padding: 20px;
        border-radius: 5px;
        text-align: center;
        font-size: 12px;
       
        .top{
            height: 20px;
            line-height: 20px;
        }
        .bottom{
            // height: 20px;
            // line-height: 20px;
            // margin-bottom: 5px;
        }
    }
    .bw_result{
        margin-top: 30px;
        border: 1px solid #D9D9D9;
        border-radius: 5px;
        overflow: hidden;
        min-width: 1200px;
        margin-bottom: 20px;
        .left{
            float: left;
            padding: 20px 20px 20px;
            width: 280px;
            // height: 313px;
            text-align: center;
            background: #FEFAF6;
           .title{
                text-align: left;
                margin-bottom: 10px;
                font-size: 14px;
           }
           .bw_item{
            width: 100px;
            height: 70px;
            display: inline-block;
            margin-right:12px;
            margin-bottom:12px;
            background: #fff;
            border: 1px solid #D9D9D9;
            .title{
                text-align: center;
                line-height: 10px;
                margin-top: 15px;
                font-size: 14px;
            }
            .number{
                font-size: 24px;
                font-weight: bold;
            }
           } 
           
        }
        .right{
            margin-left: 240px;
            padding: 20px 50px 0;
            font-size: 12px;
            .r_item{
                
                height: 140px;
                width: 100%;
                border: 1px solid #D9D9D9;
                border-radius: 5px;
                overflow: hidden;
                .t_con{
                    border: 1px solid #F3F3F3;
                    height: 60px;
                }
                .top{
                    text-align: center;
                    height: 60px;
                    font-size: 12px;
                    .sub_title{
                        margin-top: 10px
                    }
                    .sub_number{
                        font-weight: bold;
                        line-height: 30px;
                    }
                }
                .bottom{
                    background: #E9EFFA;
                    .b_con{
                        height: 80px;
                        line-height: 25px;
                        padding: 0 8px;
                        border: 1px solid #D9D9D9;
                        .number{
                            margin-left: 5px;
                            font-weight: bold;
                        }
                    }
                }
            }
        }
    }
    

  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
